import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, Image } from "react-native";
import IconNavBar from '@/components/IconNavBar'
import Loading from "@/components/LoadingModal";
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import api from "@/request/api";
import { getTransactionAmount } from "@/utils/util";
import { PayWithArray } from '@/config/config'
import moment from "moment";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenSendReceiveDetail = (props) => {

    const [loadingVisible, setLoadingVisible] = useState(false)
    const [transcationDetail, setTranscationDetail] = useState({});
    const [executeTime, setExecuteTime] = useState('');
    const [amountData, setAmountData] = useState({});

    useEffect(() => {
        let params = props.route.params
        if (params && params.txId) {
            getTranscationDetail(params.txId)
        }
    }, [])

    const getTranscationDetail = (txId) => {
        //获取交易详情
        setLoadingVisible(true)
        setTimeout(async () => {
            let result = await api.get_transaction_detail(txId)
            if (result && result.txId) {
                let obj = getTransactionAmount(result.txInfo)
                obj.logoUri = obj.logoUri.replace('/media/https%3A', 'https:/')
                setAmountData(obj)
                setExecuteTime(moment(transcationDetail.executedAt).format('MMM DD, YYYY [at] HH:mm:ss'))
                setTranscationDetail(result)
            }
            setLoadingVisible(false)
        }, 100);
    }

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenCommonCenterProps} {...{ title: 'Transaction Details' }} handlePressLeft={handlePressLeft} />
            <View style={styles.bodyContent}>
                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio }}>
                    <Image source={PayWithArray['profile_logo1']} style={{ width: 40 * ratio, height: 40 * ratio }} />
                    <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                        {/* <Text style={styles.title1}>{transcationDetail.label}</Text> */}
                        <Text ellipsizeMode="middle" numberOfLines={1}
                            style={styles.title3}>
                            {transcationDetail.txInfo?.sender.value}
                        </Text>
                    </View>
                </View>
                <Image source={require('@/assets/safe/arrow_down.png')} style={{ width: 10 * ratio, height: 16 * ratio, marginLeft: 30 * ratio, marginTop: 7 * ratio }} />
                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 20 * ratio, marginTop: 9 * ratio }}>
                    <Image source={{ uri: amountData.logoUri }} style={{ width: 30 * ratio, height: 30 * ratio }} />
                    <Text style={styles.title1}>{amountData.directionSign} {amountData.amountWithSymbol}</Text>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 18 * ratio }}>
                    <Image source={require('@/assets/safe/arrow-left-down.png')} style={{ width: 17 * ratio, height: 17 * ratio }} />
                    <Text style={styles.title2}>incominging transfer</Text>
                    <Text style={{ ...styles.title2, color: '#0069F6' }}>Success</Text>
                </View>
                <Text style={{ ...styles.title1, marginLeft: 15 * ratio, marginTop: 35 * ratio }}>
                    Executed:
                </Text>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio, marginTop: 22 * ratio }}>
                    {executeTime}
                </Text>
            </View >
            {loadingVisible && <Loading visible={loadingVisible} />}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    bodyContent: {
        flex: 1,
        marginTop: 11 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 24,
        marginLeft: 14 * ratio
    },
    title2: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 21,
        marginLeft: 6 * ratio
    },
    title3: {
        width: 178 * ratio,
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    }
})
export default SectokenSendReceiveDetail